<template>
  <div class="d-r-i">
    <div class="com-title">
      相关问题讨论
    </div>

    <div class="m-t-30">
      <a
        v-for="(item, index) in list"
        :key="item"
        :class="['item no-un-line']"
        :href="parseFullPath(getUrl(item))"
        @click.prevent="goToDetail(item)"
      >
        <div class="flex-center-wrap flex-justify-between">
          <div class="flex-center-wrap">
            <img
              :src="parseResourceUrl(item.teacher_avatar)"
              alt=""
              class="user-a"
            />
            <div style="margin-left: 10px">
              <div class="user-info">{{ item.teacher_name }}</div>
              <time>
                {{ item.create_time }}
              </time>
            </div>
          </div>
        </div>
        <div class="item-info">
          <div class="item-info-1 ell-2">
            {{ item.question_info }}
          </div>
        </div>

        <div class="line" v-if="index !== list.length - 1"></div>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      //防止重复点击
      isClickDetail: false,
      zlaBtn: {
        key_name: '',
        key_content: ''
      }
    }
  },
  watch: {
    // 之了埋点
    zlaBtn: {
      handler() {
        this.sendZlaClick()
      },
      deep: true
    }
  },
  methods: {
    // 之了数据点击
    sendZlaClick() {
      this.keyClick({
        ...this.zlaBtn
      })
    },
    getUrl(item) {
      let mapId = item.map_id || item.object_id
      return '/dayi/' + mapId + item.s_p_t + '.html'
    },
    //查看问题详情
    goToDetail(item) {
      this.zlaBtn = {
        key_name: ' 查看答疑',
        key_content: '查看答疑'
      }
      if (this.isClickDetail) return
      if (!this.isClickDetail) this.isClickDetail = true
      //帖子答疑
      let params = {}
      if (+item.is_unread > 0) params.is_unread = 1
      let mapId = item.map_id || item.object_id
      let url = '/dayi/' + mapId + item.s_p_t + '.html'
      '/dayi/' + mapId + item.s_p_t + '.html'
      //s_p_t只会取值1（帖子答疑），2（对话答疑），因服务端渲染，不允许代参，代参不利于SEO
      this.goTo(url, {
        query: params,
        target: '_blank',
        watch: true
      })
      setTimeout(() => {
        this.isClickDetail = false
      }, 300)
    }
  }
}
</script>

<style scoped>
.d-r-i {
  padding: 30px;
  background: #ffffff;
  border-radius: 12px;
}

.com-title {
  height: 25px;
  font-size: 22px;
  font-weight: 600;
  color: #383838;
  line-height: 25px;
}

.user-a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.user-info {
  font-size: 16px;
  font-weight: 600;
  color: #383838;
  line-height: 22px;
}

time {
  font-size: 12px;
  font-weight: 400;
  color: #666666;
  line-height: 17px;
}

.item-info {
  margin-top: 10px;
  padding: 16px 20px;
  max-height: 80px;
  background: #f7f7f7;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 400;
  color: #666666;
}

.item-info-1 {
  max-height: 48px;
}

.item {
  padding: 30px 0;
}

.line {
  margin: 20px 0;
  height: 1px;
}
</style>
